<template>
  <div>
    <u-cell-group>
      <!-- 头像 -->
      <u-cell-item title="头像" :arrow="false">
        <template v-solt:right-icon>
          <u-avatar :src="userInfo.userImg"></u-avatar>
        </template>
      </u-cell-item>
      <!-- 名称 -->
      <u-cell-item
        title="名称"
        :value="userInfo.userName"
        :arrow="false"
      ></u-cell-item>
      <!-- 电话 -->
      <u-cell-item
        title="电话"
        :value="userInfo.userPhone"
        @click="phoneShow = true"
      >
      </u-cell-item>
      <!-- 生日 -->
      <u-cell-item
        title="生日"
        :value="userInfo.userBorthday"
        @click="birthdayShow = true"
      ></u-cell-item>
      <!-- 性别 -->
      <u-cell-item
        title="性别"
        :value="userInfo.userSex"
        @click="sexShow = true"
      ></u-cell-item>
      <!-- 注册时间 -->
      <u-cell-item
        title="注册时间"
        :value="userInfo.userRegisterTime"
        :arrow="false"
      ></u-cell-item>
      <!-- 最后登陆时间 -->
      <u-cell-item
        title="最后登陆时间"
        :value="userInfo.userLastLoginTime"
        :arrow="false"
      ></u-cell-item>
      <!-- 角色 -->
      <u-cell-item title="角色" :arrow="false">
        <template v-solt:right-icon>
          <u-tag
            :text="isManager ? '管理员' : '普通用户'"
            shape="circle"
            mode="dark"
            bg-color="#adb838"
          />
        </template>
      </u-cell-item>
      <!-- 所属学校 -->
      <u-cell-item
        v-show="isManager"
        title="所属学校"
        :value="userInfo.schoolName"
        :arrow="false"
      ></u-cell-item>
      <!-- 所属学校 -->
      <u-cell-item
        v-show="isManager"
        title="真实姓名"
        :value="userInfo.trueName"
        :arrow="false"
      ></u-cell-item>
    </u-cell-group>
    <!-- 手机弹窗 -->
    <u-modal
      v-model="phoneShow"
      title="绑定手机号"
      :show-cancel-button="true"
      confirm-color="#adb838"
      @confirm="modifiyPhone"
    >
      <view class="slot-content">
        <u-form-item
          label="手机"
          :border-bottom="false"
          placeholder="请获取手机号"
        >
          <view class="phone">
            <u-input v-model="phone" />
            <u-button
              type="success"
              size="mini"
              shape="circle"
              :custom-style="customStyle"
              open-type="getPhoneNumber"
              @getphonenumber="getPhoneNumber"
              >获取</u-button
            >
          </view>
        </u-form-item>
      </view>
    </u-modal>

    <!-- 生日 -->
    <u-calendar
      v-model="birthdayShow"
      mode="date"
      @change="birthday"
    ></u-calendar>
    <!-- 性别 -->
    <u-select
      v-model="sexShow"
      :list="list"
      title="请选择你的性别"
      @confirm="sexChange"
    ></u-select>
  </div>
</template>

<script>
// import WXBizDataCrypt from "@/common/WXBizDataCrypt.js";
// import { WX_AUTH_URL, APPID, SECRET } from "@/common/wxConfig.js";
export default {
  data() {
    return {
      isManager: false,
      userInfo: {},
      schoolList: [],
      phoneShow: false,
      phone: "",
      birthdayShow: false,
      list: [
        {
          value: "1",
          label: "女",
        },
        {
          value: "2",
          label: "男",
        },
      ],
      sexShow: false,
      customStyle: {
        backgroundColor: "#adb838",
      },
    };
  },
  methods: {
    // getPhoneNumber(e) {
    //   var _this = this;
    //   wx.login({
    //     success: (res) => {
    //       if (res.code) {
    //         //微信登录成功 已拿到code
    //         uni.request({
    //           url: WX_AUTH_URL,
    //           method: "GET",
    //           data: {
    //             appid: APPID, //你的小程序的APPID
    //             secret: SECRET, //你的小程序的secret,
    //             js_code: res.code, //wx.login 登录成功后的code
    //           },
    //           success: (cts) => {
    //             // 换取成功后 暂存这些数据 留作后续操作
    //             let session_key = cts.data.session_key; //session_key  会话密钥
    //             let pc = new WXBizDataCrypt(APPID, session_key); //wxXXXXXXX为你的小程序APPID
    //             let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
    //             _this.phone = data.purePhoneNumber;
    //           },
    //         });
    //       } else {
    //         console.log("登录失败！" + res.errMsg);
    //       }
    //     },
    //   });
    //   console.log(e);
    // },
    /**
     * 获取学校
     */
    async getSchoolList() {
      return new Promise((resolve) => {
        this.$u.api.getLinkageInfoApi().then((res) => {
          this.schoolList = res.data;
          resolve();
        });
      });
    },
    /**
     * 获取信息
     */
    async getUserInfo() {
      await this.getSchoolList();
      this.$u.api.getUserInfoApi().then((res) => {
        console.log(this.vuex_AddressData);
        // 时间处理
        if (res.userInfo.schoolId != null && res.userInfo.userRole != 0) {
          res.userInfo.schoolName = this.schoolList.filter(
            (v) => v.schoolId === res.userInfo.schoolId
          )[0].schoolName;
          this.isManager = true;
        }
        this.userInfo = res.userInfo;
      });
    },
    /**
     * 修改手机
     */
    modifiyPhone() {
      if (this.phone === null || this.phone === "") {
        this.$u.toast("手机号不能为空");
        return;
      }
      this.$u.api.modifiyUserInfoApi({ userPhone: this.phone }).then((res) => {
        if (res.msg) {
          uni.showToast({
            title: "修改成功",
            duration: 2000,
          });
          this.getUserInfo();
        }
      });
    },
    /**
     * 生日改变
     */
    birthday(e) {
      this.$u.api.modifiyUserInfoApi({ userBorthday: e.result }).then((res) => {
        if (res.msg) {
          uni.showToast({
            title: "修改成功",
            duration: 2000,
          });
          this.getUserInfo();
        }
      });
    },
    /**
     * 改变性格
     */
    sexChange(e) {
      this.$u.api.modifiyUserInfoApi({ userSex: e[0].label }).then((res) => {
        if (res.msg) {
          uni.showToast({
            title: "修改成功",
            duration: 2000,
          });
          this.getUserInfo();
        }
      });
    },
  },
  onShow() {
    this.getUserInfo();
  },
};
</script>

<style scoped lang ='scss' >
.slot-content {
  padding: 20rpx;
  .phone {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
